<template>
  <div class="w-page w-dwPage">
    <div class="w-head">
      <img src="../assets/img/second/banner2.png" alt="">
    </div>
    <div class="w-con">
      <van-tabs v-model="active" animated color="#762A2A" background="rgba(255,255,255,0)" :border='false'
                title-active-color="#762A2A" title-inactive-color="#fff">
        <van-tab v-for="(v,i) in cardList" :key="i">
          <div slot="title">{{v}}</div>
          <ul class="w-ulinfo w-ulinfo2" v-if="i==0">
            <li class="w-li">
              <div class="w-title">一、银行转账</div>
              <ul class="w-ulitem">
                <li class="flex">
                  <div class="w-namebox flex hb vc">
                    <p>开</p>
                    <p>户</p>
                    <p>名：</p>
                  </div>
                  <div class="shrink0">山西师范大学教育发展基金会</div>
                </li>
                <li class="flex ">
                  <div class="w-namebox flex hb vc">
                    <p>账</p>
                    <p>号：</p>
                  </div>
                  <div class="shrink0">1927 0188 0000 17015</div>
                </li>
                <li class="flex ">
                  <div class="w-namebox flex hb vc">
                    <p>开</p>
                    <p>户</p>
                    <p>行：</p>
                  </div>
                  <div class="shrink0">晋商银行临汾支行</div>
                </li>
                <li class="flex ">
                  <div class="w-namebox flex hb vc">
                    <p>收</p>
                    <p>款</p>
                    <p>人：</p>
                  </div>
                  <div class="shrink0">山西师范大学教育发展基金</div>
                </li>
                <li class="flex ">
                  <div class="w-namebox flex hb vc">
                    <p>备</p>
                    <p>注：</p>
                  </div>
                  <div>支付时需备注捐赠项目</div>
                </li>
              </ul>
            </li>
            <li class="w-li">
              <div class="w-title">二、邮局汇款：</div>
              <ul class="w-ulitem">
                <li class="flex ">
                  <div>
                    <div class="w-namebox flex hb vc">
                      <p>地</p>
                      <p>址：</p>
                    </div>
                  </div>
                  <div>临汾市尧都区866号山西师范大学教育基金会212室</div>
                </li>
                <li class="flex ">
                  <div class="w-namebox flex hb vc">
                    <p>名</p>
                    <p>称：</p>
                  </div>
                  <div class="shrink0">浙江大学教育基金会</div>
                </li>
                <li class="flex ">
                  <div class="w-namebox flex hb vc">
                    <p>邮</p>
                    <p>政</p>
                    <p>编</p>
                    <p>码：</p>
                  </div>
                  <div>030002</div>
                </li>
              </ul>
            </li>
            <li class="w-li">
              <div class="w-title">三、支付宝捐赠：</div>
              <ul class="w-ulitem">
                <li class="flex ">
                  <div class="w-namebox2 flex">
                    <p>支付宝户名：</p>
                  </div>
                  <div class="shrink0">山西师范大学教育基金会</div>
                </li>
                <li class="flex ">
                  <div class="w-namebox2 flex">
                    <p>支付宝账户：</p>
                  </div>
                  <div>sxsf@ju.edu.cn</div>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="w-ulinfo" v-if="i==1">
            <li class="w-li">电话：0352-26567229 0352-26569279</li>
            <li class="w-li">传真：+0352-26567229</li>
            <li class="w-li">邮箱：sxdxcmlabjjh@szu.edu.cn</li>
            <li class="w-li">地址：山西临汾市尧都区街道39号</li>
            <li class="w-li">邮编：518060</li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {
  Tab,
  Tabs
} from 'vant'

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data () {
    return {
      bgimg: require('../assets/img/first/conUs.png'),
      active: 0,
      cardList: ['线上捐赠', '线下捐赠']
    }
  },
  methods: {}
}
</script>
<style>

</style>
<style scoped>
  .w-page {
    width: 100vw;
    overflow: hidden;
    background: #E1E0DF;
    height: 100vh;
    position: relative;
  }

  .w-head img {
    width: 100vw;
  }

  .w-con {
    width: 96vw;
    margin: 0 auto;
    position: absolute;
    top: 10vw;
    left: 2vw;
  }

  .w-ulinfo {
    background: #fff;
    border-radius: 10px;
    padding: 27px 26px 0px;
    height: 86vh;
  }

  .w-ulinfo2 .w-li {
    margin-bottom: 20px;
  }

  .w-ulinfo li {
    font-size: 17px;
    color: #313131;
    padding: 4px 0;
  }

  .w-namebox {
    width: 20vw;
  }

  .w-namebox2 {
    width: 25vw;
  }

  .w-ulinfo2 li {
    font-size: 15px;
  }

  .w-ulitem > li {
    -moz-box-pack: start;
    -webkit-box-pack: flex-start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
</style>
